<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>汽车投诉数据分析</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <style>
        /* 基础样式设置 */
        body {
            /* 移除默认边距，设置字体和背景色 */
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
            background: #0f1c3c; /* 深蓝色背景 */
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* 头部样式 */
        .header {
            text-align: center;
            padding: 20px 0;
            position: relative;
        }

        /* 头部装饰线 */
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ffff, transparent); /* 渐变装饰线 */
        }

        /* 标题渐变效果 */
        h1 {
            font-size: 2.5em;
            margin: 0;
            background: linear-gradient(120deg, #00ffff, #0066ff);
            -webkit-background-clip: text; /* 文字渐变效果 */
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
        }

        /* 图表容器网格布局 */
        .chart-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3列布局 */
            gap: 20px;
            padding: 20px;
            max-width: 1800px;
            margin: 0 auto;
        }

        /* 单个图表样式 */
        .chart {
            height: 350px;
            background: rgba(16, 32, 67, 0.8);
            border: 1px solid rgba(0, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            position: relative;
            backdrop-filter: blur(10px); /* 毛玻璃效果 */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡动画 */
            cursor: pointer;
        }

        /* 自定义提示框样式 */
        .tooltip {
            position: absolute;
            display: none;
            background: rgba(0, 24, 59, 0.95);
            border: 1px solid #00ffff;
            border-radius: 8px;
            padding: 15px;
            width: 300px;
            color: #fff;
            font-size: 14px;
            line-height: 1.6;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            z-index: 1000;
            transition: opacity 0.3s;
        }

        .tooltip-title {
            color: #00ffff;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
        }

        .tooltip-content {
            color: #e0e0e0;
            text-align: justify;
        }

        /* 添加粒子容器样式 */
        #particles-js {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: #0f1c3c;
        }

        .chart {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .chart:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
        }
    </style>
</head>
<body>
<div id="particles-js"></div>

<div class="header">
    <h1>汽车投诉数据分析</h1>
    <div class="subtitle">大数据可视化展示平台</div>
</div>

<div class="chart-container">
    <div id="brandChart" class="chart"></div>
    <div id="problemChart" class="chart"></div>
    <div id="seriesChart" class="chart"></div>
    <div id="statusChart" class="chart"></div>
    <div id="trendChart" class="chart"></div>
    <div id="energyChart" class="chart"></div>
</div>

<div class="tooltip">
    <div class="tooltip-title"></div>
    <div class="tooltip-content"></div>
</div>

<script src="/static/js/charts.js"></script>
<script>
    // 配置粒子动画
    particlesJS('particles-js', {
        particles: {
            number: {
                value: 80,
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: '#00ffff'
            },
            shape: {
                type: 'circle'
            },
            opacity: {
                value: 0.5,
                random: false
            },
            size: {
                value: 3,
                random: true
            },
            line_linked: {
                enable: true,
                distance: 150,
                color: '#00ffff',
                opacity: 0.2,
                width: 1
            },
            move: {
                enable: true,
                speed: 2,
                direction: 'none',
                random: false,
                straight: false,
                out_mode: 'out',
                bounce: false
            }
        },
        interactivity: {
            detect_on: 'canvas',
            events: {
                onhover: {
                    enable: true,
                    mode: 'grab'
                },
                onclick: {
                    enable: true,
                    mode: 'push'
                },
                resize: true
            }
        },
        retina_detect: true
    });
</script>
</body>
</html> 